<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html(
        title=${station.name},
        extraStyles=~{::styles},
        extraScripts=~{::scripts},
        content=~{::content}
      )}">
<head>
    <th:block th:fragment="styles">
        <style>
            .station-info {
                background-color: #f8f9fa;
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 20px;
            }
            .info-label {
                font-weight: bold;
                color: #495057;
            }
        </style>
    </th:block>
</head>
<body>
    <th:block th:fragment="content">
        <div class="container mt-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a th:href="@{/stations}">回收站点</a></li>
                    <li class="breadcrumb-item active" aria-current="page" th:text="${station.name}">站点详情</li>
                </ol>
            </nav>
            
            <div class="station-info">
                <h2 th:text="${station.name}">站点名称</h2>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <p><span class="info-label">地址：</span> <span th:text="${station.address}"></span></p>
                        <p><span class="info-label">联系电话：</span> <span th:text="${station.contactPhone}"></span></p>
                        <p><span class="info-label">营业时间：</span> <span th:text="${station.businessHours}"></span></p>
                        <p><span class="info-label">可回收物品：</span> <span th:text="${station.acceptableItems}"></span></p>
                        <p><span class="info-label">状态：</span> 
                            <span th:if="${station.status == 1}" class="badge bg-success">营业中</span>
                            <span th:if="${station.status == 0}" class="badge bg-danger">已关闭</span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <div id="map" style="height: 300px; border-radius: 8px;"></div>
                    </div>
                </div>
                <div class="mt-3">
                    <p><span class="info-label">站点描述：</span></p>
                    <p th:text="${station.description}"></p>
                </div>
            </div>
        </div>
    </th:block>

    <th:block th:fragment="scripts">
        <script th:inline="javascript">
            var map;
            var marker;
            
            function loadBaiduMap() {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = /*[[@{${'https://api.map.baidu.com/api?v=3.0&ak=' + @baiduMapConfig.ak + '&callback=initMap'}}]]*/ '';
                    script.async = true;
                    script.onerror = reject;
                    window.initMap = function() {
                        resolve();
                        delete window.initMap;
                    };
                    document.body.appendChild(script);
                });
            }

            async function initialize() {
                try {
                    await loadBaiduMap();
                    
                    var latitude = [[${station.latitude}]];
                    var longitude = [[${station.longitude}]];
                    
                    map = new BMap.Map("map");
                    var point = new BMap.Point(longitude, latitude);
                    map.centerAndZoom(point, 15);
                    map.enableScrollWheelZoom();
                    map.addControl(new BMap.NavigationControl());
                    map.addControl(new BMap.ScaleControl());

                    marker = new BMap.Marker(point);
                    map.addOverlay(marker);

                    var content = '<div style="padding:10px;">' +
                        '<h5>[[${station.name}]]</h5>' +
                        '<p>[[${station.address}]]</p>' +
                        '<p>营业时间: [[${station.businessHours}]]</p>' +
                        '<p>联系电话: [[${station.contactPhone}]]</p>' +
                        '</div>';
                    
                    var infoWindow = new BMap.InfoWindow(content);
                    marker.addEventListener("click", function() {
                        this.openInfoWindow(infoWindow);
                    });
                    marker.openInfoWindow(infoWindow);
                } catch (error) {
                    console.error('百度地图加载失败:', error);
                }
            }

            document.addEventListener('DOMContentLoaded', initialize);
        </script>
    </th:block>
</body>
</html> 